<template>
  <div class="bubble">
    <div class="annex-box">
      <div class="annex-flex">
        <div class="annex-flex-1">
          <el-avatar
            :size="22"
            :src="circleUrl"
            style="float: left; margin: 10px 0 0 0"
          />
        </div>
        <div class="annex-flex-12">
          <div style="height: 24px">
            <span style="color: #333">
              {{ newData.belongName ? newData.belongName : '--' }}</span
            >

            <span style="margin-left: 16px; font-size: 11px; color: #999">
              <el-icon :size="14"><Clock /></el-icon>
              {{ newData.createTime }}</span
            >
            <span
              style="margin-left: 16px; font-size: 11px; color: #333"
              v-if="operateFkList != '1'"
            >
              {{
                rsgl_conduct_type.find(a => a.value == newData.dealStatus)
                  ? rsgl_conduct_type.find(a => a.value == newData.dealStatus)
                      .label
                  : '--'
              }}</span
            >
            <span
              style="font-size: 11px; color: #333"
              v-if="newData.targetName"
            >
              给
              <span style="margin: 0 6px"> {{ newData.targetName }}</span>
              处理
            </span>
            <span
              v-show="newData.diffTime"
              style="margin-left: 16px; font-size: 11px; color: #333"
            >
              {{ newData.diffTime }}
            </span>
            <span
              v-if="operateFkList == '1' && newData.workHour"
              style="margin-left: 16px; font-size: 11px; color: #333"
            >
              工时(小时)：
              {{ newData.workHour || 1 }}</span
            >
            <span
              v-if="newData.dealStatus == 7"
              style="margin-left: 8px; font-size: 11px; color: #333"
              >当前进度：{{ newData.schedule }}</span
            >
          </div>
          <div style="line-height: 30px">
            <span v-if="newData.dealStatus == 7">
              {{ newData.scheduleRemark }}</span
            >
            <span v-else> {{ newData.remark }}</span>
          </div>
          <div class="cursor-pointer">
            <div v-if="newData.dealStatus == 7 && newData.scheduleFileName">
              附件：
              <span
                v-for="item in newData.scheduleFilePath"
                :key="item"
                style="color: #1890ff; cursor: pointer"
              >
                <span @click="handleDownload(item.url)">
                  《{{ item.origFileName }}》
                </span>
              </span>
            </div>
            <div v-else-if="newData.dealStatus != 7 && newData.dealFileName">
              附件：
              <span
                v-for="item in newData.dealFilePath"
                :key="item"
                style="color: #1890ff; cursor: pointer"
              >
                <span @click="handleDownload(item.url)">
                  《{{ item.origFileName }}》
                </span>
              </span>
            </div>
          </div>
        </div>
        <div
          class="annex-flex-1"
          v-if="operateFkList == '1'"
          @click="toRecover(newData.id, newData.taskId)"
        >
          <span class="cursor-pointer" style="color: #1890ff">回复</span>
        </div>
      </div>
    </div>

    <div class="children">
      <Bubble
        v-for="child in newData.children"
        :data="child"
        :key="child.id"
        :operateFkList="operateFkList"
        @getTaskDetails="getTaskDetails"
      >
      </Bubble>
    </div>
  </div>
  <!-- 回复 -->
  <recoverForm
    v-if="isRecover"
    :dialogParam="dialogParam"
    @close="handleClose"
  ></recoverForm>
</template>
<script setup name="Bubble">
const props = defineProps({
  data: {
    type: Array,
    required: true
  },
  operateFkList: {
    type: String,
    required: true
  }
})
import headaImage from '@/assets/images/icon/principal.png'
import Bubbles from './Bubbles.vue'
import recoverForm from '../modules/recover.vue'
import { getTaskDetail } from '@/api/taskManage/task'
import { reactive, getCurrentInstance, toRefs } from 'vue'
const { proxy } = getCurrentInstance()
const data = reactive({
  circleUrl: headaImage,
  newData: [],
  isRecover: false,
  dialogParam: {
    isVisible: true
  }
})
const { circleUrl, newData, isRecover, dialogParam } = toRefs(data)
const {
  task_reminder_time,
  rsgl_urgent_status,
  rsgl_task_status,
  task_order_type,
  rsgl_conduct_type,
  reminder_method,
  rsgl_question_type
} = proxy.useDict(
  'task_reminder_time',
  'rsgl_urgent_status',
  'rsgl_task_status',
  'task_order_type',
  'rsgl_conduct_type',
  'reminder_method',
  'rsgl_question_type'
)
watch(
  () => props.data,
  val => {
    if (val) {
      init()
    }
  },
  { immediate: true }
)

function init() {
  newData.value = props.data
  console.log('Bubble===', props.data)
  let filePathList = newData.value.dealFilePath
    ? newData.value.dealFilePath.split(',')
    : ''
  let fileNameList = newData.value.dealFileName
    ? newData.value.dealFileName.split(',')
    : ''
  let scheduleFilePathList = newData.value.scheduleFilePath
    ? newData.value.scheduleFilePath.split(',')
    : ''
  let scheduleFileNameList = newData.value.scheduleFileName
    ? newData.value.scheduleFileName.split(',')
    : ''

  console.log('filePathList===', filePathList)
  let newArr = []
  let newFileArr = []
  if (newData.value.dealFilePath) {
    filePathList.map(item => {
      newArr.push({
        url: item,
        origFileName: ''
      })
    })
  }
  if (newData.value.dealFileName) {
    fileNameList.map((item, i) => {
      if (newArr[i]) {
        newArr[i].origFileName = item
      }
    })
  }
  if (newData.value.scheduleFilePath) {
    scheduleFilePathList.map(item => {
      newFileArr.push({
        url: item,
        origFileName: ''
      })
    })
    scheduleFileNameList.map((item, i) => {
      if (newFileArr[i]) {
        newFileArr[i].origFileName = item
      }
    })
  }
  newData.value.dealFilePath = newArr
  console.log('newData====', newData.value)
  newData.value.scheduleFilePath = newFileArr
}
// init()
//回复
function toRecover(id, taskId) {
  isRecover.value = true
  dialogParam.value.operateId = id
  dialogParam.value.taskId = taskId
}

//操作按钮事情 下载文件
const handleDownload = row => {
  const path = row
  window.open(path, '_blank')
  //   addDownloadLog({ fileId: row.fileId })
}
//任务关闭
const emit = defineEmits(['getTaskDetails'])
function handleClose() {
  console.log(emit, 'emit')
  emit('getTaskDetails')
  isRecover.value = false
}
//获取详情
function getTaskDetails() {
  emit('getTaskDetails')
}
</script>
<style lang="scss" scoped>
.bubble {
  padding-bottom: 16px;
  border-radius: 8px;
  width: 100%;
  width: 90%;
  //   margin: 10px;
  box-shadow: 0px 0px 5px #ccc;
  .annex-box {
    padding: 0px 10px 10px 10px;

    .operate-flex {
      padding: 10px;
      border: 1px solid #eee;
      display: block;
      width: 100%;
      .operate-flex-top {
        width: 100%;
        height: 36px;
      }
      .operate-box-flex {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .operate-box-flex-1 {
          // flex: 1;
          display: inline-block;
          width: 30px;
        }
        .operate-box-flex-12 {
          flex: 15;
          font-size: 14px;
        }
      }
    }
    .annex-dom {
      padding: 0 18px;
    }
    .annex-flex {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 5px 18px 0 12px;
      line-height: 40px;
      margin-top: 18px;
      //   border: 1px solid #eee;
      width: 100%;
      .annex-flex-24 {
        width: 100%;
        font-size: 14px;
      }
      .annex-flex-6 {
        flex: 11;
        font-size: 14px;
      }
      .annex-flex-1 {
        // flex: 1;
        display: inline-block;
        width: 30px;
      }
      .annex-flex-12 {
        flex: 15;
        font-size: 14px;
      }
      .annex-flex-4 {
        flex: 4;
      }
      .annex-flex-3 {
        flex: 3;
      }
      .annex-flex-2 {
        flex: 2;
      }
      .annex-title {
        color: #409efc;
      }
    }
  }
}

.children {
  //   margin-top: 8px;
  margin-left: 16px;
}
</style>
